<div>
    <div class="row">
        <div class="col-lg-1 padding-r-0">
            <div class="bg-white border-radius">
                <div class="padding">收费对象</div>
                <div class="padding-sm" v-for="(item,index) in batchPayFeeOrderInfo.payObjs">
                    <input type="checkbox" class="i-checks checkItem" v-bind:value="item"
                        v-model="batchPayFeeOrderInfo.payerObjNames" @change="_chanagePayerObjName()">
                    {{item}}
                </div>
            </div>
        </div>
        <div class="col-lg-11">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>
                        <vc:i18n name="批量缴费" namespace="batchPayFeeOrder"></vc:i18n>
                    </h5>
                    <div class="ibox-tools" style="top:10px;">
                        <button type="button" class="btn btn-white btn-sm" v-on:click="_goBack()">
                            <vc:i18n name="返回"></vc:i18n>
                        </button>
                    </div>
                </div>
                <div class="ibox-content">
                    <table id="batchTable" class="footable table table-stripped toggle-arrow-tiny" data-page-size="15">
                        <thead>
                            <tr>
                                <th class="text-center"><input type="checkbox" class="i-checks all-check"
                                        @click="checkAll($event)"></th>
                                <th class="text-center">
                                    <vc:i18n name="费用类型" namespace="batchPayFeeOrder"></vc:i18n>
                                </th>
                                <th class="text-center">
                                    <vc:i18n name="费用项目" namespace="batchPayFeeOrder"></vc:i18n>
                                </th>
                                <th class="text-center">
                                    <vc:i18n name="费用标识" namespace="batchPayFeeOrder"></vc:i18n>
                                </th>
                                <th class="text-center">
                                    <vc:i18n name="收费对象" namespace="batchPayFeeOrder"></vc:i18n>
                                </th>
                                <th class="text-center">
                                    <vc:i18n name="应收时间段" namespace="batchPayFeeOrder"></vc:i18n>
                                </th>
                                <th class="text-center">
                                    应收/欠费
                                </th>
                                <th class="text-center">
                                    <div style="width: 100px; margin:0 auto">
                                        <vc:i18n name="缴费周期" namespace="batchPayFeeOrder"></vc:i18n>
                                    </div>
                                </th>
                                <th class="text-center">
                                    <div style="width: 150px; margin:0 auto">
                                        <vc:i18n name="实收" namespace="batchPayFeeOrder"></vc:i18n>
                                    </div>
                                </th>
                                <th class="text-center">
                                    <div style="width: 100px; margin:0 auto">
                                        <vc:i18n name="备注" namespace="batchPayFeeOrder"></vc:i18n>
                                    </div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="batchFee in batchPayFeeOrderInfo.batchFees">
                                <td class="text-center">
                                    <input type="checkbox" class="i-checks checkItem" v-bind:value="batchFee.feeId"
                                        v-model="batchPayFeeOrderInfo.selectPayFeeIds">
                                </td>
                                <td class="text-center">{{batchFee.feeTypeCdName}}</td>
                                <td class="text-center">{{batchFee.feeName}}</td>
                                <td class="text-center">{{batchFee.feeFlagName}}</td>
                                <td class="text-center">{{_getBatchPayFeeRoomName(batchFee)}}</td>
                                <td class="text-center">{{_getEndTime(batchFee)}}</br>
                                    ~{{_getDeadlineTime(batchFee)}}
                                </td>
                                <td class="text-center">{{batchFee.receivableAmount}}/{{batchFee.amountOwed}}</td>
                                <td class="text-center" style="width: 130px;" v-if="batchFee.feeFlag != '2006012'">
                                    <div class="flex justify-start" style="width: 120px; margin:0 auto" >
                                        <div v-if="batchFee.tempCycle == '-102'" style="line-height: 38px;">周期：{{batchFee.cycles}}个月</div>
                                        <div v-else-if="batchFee.tempCycle == '-101'" >自定义金额</br>{{batchFee.receivedAmount}}</div>
                                        <div v-else-if="batchFee.tempCycle == '-103'" >结束时间</br>{{batchFee.custEndTime}}</div>
                                        <select class="custom-select" v-model="batchFee.cycles" v-else
                                            @change="_changeMonth(batchFee.cycles,batchFee)">
                                            <option selected disabled value="">{{vc.i18n('请选择缴费周期','batchPayFeeOrder')}}
                                            </option>
                                            <option v-for="item in _getBatchPaymentCycles(batchFee)" :value="item">
                                                {{item}}{{vc.i18n('个月','batchPayFeeOrder')}}</option>
                                        </select>
                                        <span class="fa fa-gear margin-left-xs hand text-blue" style="line-height: 38px;" @click="_settingsFeeCycle(batchFee)"></span>
                                    </div>
                                </td>
                                <td v-else>
                                    -
                                </td>
                                <td class="text-center">
                                    <div style="width: 150px; margin:0 auto" v-if="batchFee.receivedAmountSwitch=='1'"
                                        @change="_doComputeTotalFee()">
                                        <input type="text" :placeholder="vc.i18n('请输入实际金额','batchPayFeeOrder')"
                                            v-model="batchFee.receivedAmount" class="form-control">
                                    </div>
                                    <div v-else>
                                        {{batchFee.receivedAmount}}
                                    </div>
                                </td>
                                <td class="text-center">
                                    <div style="width: 200px; margin:0 auto">
                                        <input type="text" :placeholder="vc.i18n('请输入备注','batchPayFeeOrder')"
                                            v-model="batchFee.remark" class="form-control">
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                   
                </div>
            </div>

            <vc:create path="property/payFeeUserAccount"></vc:create>
            <div class="row">
                <div class="col-md-8">
                    <div>
                        温馨提示：批量缴费不支持优惠折扣，账户扣款和优惠券抵扣功能，如需要请到缴费页面缴费
                        <br />
                        <b>缴费金额：缴费金额等于所有实收</b>
                    </div>
                </div>
                <div class="col-md-2">
                    缴费金额：<span style="font-size: 30px; color: red; padding-left: 0px;">{{batchPayFeeOrderInfo.feePrices}}元</span>
                </div>
                <div class="col-md-2 text-right">
                    <button type="button" class="btn btn-success btn-lg " @click="_openPayFee('qrCode')">
                        <vc:i18n name="扫码收费" namespace="batchPayFeeOrder"></vc:i18n>
                    </button>
                    <button type="button" class="btn  btn-primary btn-lg margin-left-xs"
                        v-on:click="_openPayFee('common')">
                        <vc:i18n name="提交收费" namespace="batchPayFeeOrder"></vc:i18n>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <vc:create path="fee/batchPayConfirm"></vc:create>

    <vc:create path="fee/batchFeeCycle"></vc:create>

    
</div>